import React, { Component } from "react";
import Header from "../../components/Header/Header";
import "./Shop.less";
import { Button } from "antd-mobile";
import { filterPrice } from "../../filters/index";
import { connect } from "react-redux";
import {
  actions,
  getNormalList,
  getGroupList,
  getAllChecked,
} from "../../store/modules/shop";
import { bindActionCreators } from "redux";

class Shop extends Component {
  componentDidMount() {
    this.props.shop.getList();
  }
  render() {
    let {
      normalList,
      groupList,
      allChecked,
      shop: { del, changeOne, changeAll, add, sub },
    } = this.props;

    //计算总价
    let allPrice = 0;
    let price1 = normalList.reduce((val, item) => {
      if (item.checked) {
        return val + item.num * item.price;
      }
      return val;
    }, 0);
    let price2 = groupList.reduce((val, item) => {
      if (item.checked) {
        return val + item.num * item.price;
      }
      return val;
    }, 0);
    allPrice = price1 + price2;

    return (
      <>
        <Header title="购物车"></Header>
        <div className="shop_main">
          <h3>普通商品</h3>
          {normalList.map((item, index) => {
            return (
              <div className="item" key={item.id}>
                <input
                  type="checkbox"
                  name=""
                  id=""
                  onChange={(e) => changeOne(e, index, item)}
                  checked={item.checked ? true : false}
                />
                <img src={item.img} alt="" />
                <div className="intro">
                  <p>{item.goodsname}</p>
                  <span>
                    &yen;<i>{item.price}</i>
                  </span>
                </div>
                <div className="num">
                  <button onClick={() => sub(item.id, item)}>-</button>
                  <span>{item.num}</span>
                  <button onClick={() => add(item.id)}>+</button>
                </div>
              </div>
            );
          })}
        </div>
        <div className="shop_main" style={{ paddingBottom: "1rem" }}>
          <h3>万人团商品</h3>
          {groupList.map((item, index) => {
            return (
              <div className="item" key={item.id}>
                <input
                  type="checkbox"
                  name=""
                  id=""
                  onChange={(e) => changeOne(e, index, item)}
                  checked={item.checked ? true : false}
                />
                <img src={item.img} alt="" />
                <div className="intro">
                  <p>{item.goodsname}</p>
                  <span>
                    &yen;<i>{item.price}</i>
                  </span>
                </div>
                <div className="num">
                  <button onClick={() => sub(item.id, item)}>-</button>
                  <span>{item.num}</span>
                  <button onClick={() => add(item.id)}>+</button>
                </div>
              </div>
            );
          })}
        </div>
        <div className="toBuy">
          <div className="all">
            <input
              type="checkbox"
              id="all"
              onChange={(e) => changeAll(e)}
              checked={allChecked}
            />
            <label htmlFor="all">全选</label>
          </div>
          <span>合计</span>
          <i>
            &yen;<em>{filterPrice(allPrice)}</em>
          </i>
          <Button color="danger" size="small" className="toBuy_btn1">
            去结算
          </Button>
          <Button
            color="warning"
            size="small"
            className="toBuy_btn2"
            onClick={() => del()}
          >
            删除
          </Button>
        </div>
      </>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    normalList: getNormalList(state),
    groupList: getGroupList(state),
    allChecked: getAllChecked(state),
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    shop: bindActionCreators(actions, dispatch),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Shop);
